Framework7 এ প্রতিটি Page-র জন্য কিছু নির্দিষ্ট Lifecycle Events রয়েছে, যা Page লোড, শো, হাইড বা ডেস্ট্রয়ের সময় ট্রিগার হয়। এই ইভেন্টগুলো ব্যবহার করে আপনি অ্যাপ্লিকেশনের স্টেট, ডেটা লোডিং, UI আপডেট এবং অন্যান্য কাস্টম অপারেশন পরিচালনা করতে পারেন।
Page Lifecycle Events কী?
Page Lifecycle Events হলো কিছু নির্দিষ্ট ইভেন্ট যা Framework7 পৃষ্ঠা লোড হওয়া, প্রদর্শিত হওয়া, আড়াল হওয়া, বা ধ্বংস হওয়ার সময় স্বয়ংক্রিয়ভাবে কল করা হয়। উদাহরণস্বরূপ, একটি পৃষ্ঠা যখন প্রথমবার লোড হয়, তখন pageInit ইভেন্ট ট্রিগার হয়। পৃষ্ঠা যখন দৃশ্যমান হয়, তখন pageBeforeIn বা pageAfterIn ইভেন্ট ট্রিগার হতে পারে।
এই ইভেন্টগুলো ডেভেলপারকে প্রতিটি অবস্থায় প্রয়োজনীয় কোড রান করার সুযোগ দেয়।
সাধারণ Page Lifecycle Events
pageInit
- কখন ট্রিগার হয়: পৃষ্ঠা প্রথমবার লোড হওয়ার সময়।
- ব্যবহার: প্রথমবার পৃষ্ঠা লোড হওয়ার সময় API ডেটা ফেচ করা, UI সেটআপ করা, বা ইনিশিয়াল স্টেট নির্ধারণ।
on: {
pageInit: function (e, page) {
console.log('Page initialized');
// Data fetch বা UI স্টেট সেট করুন
}
}
pageBeforeIn
- কখন ট্রিগার হয়: পৃষ্ঠা Display হওয়ার ঠিক আগে।
- ব্যবহার: পৃষ্ঠা প্রদর্শিত হওয়ার আগ মুহূর্তে UI আপডেট করা বা Transition শুরু করা।
on: {
pageBeforeIn: function (e, page) {
console.log('Page will be shown soon');
// UI Transition শুরু করুন বা প্রয়োজনীয় আপডেট করুন
}
}
pageAfterIn
- কখন ট্রিগার হয়: পৃষ্ঠা Display হওয়ার পর, যখন পৃষ্ঠা দৃশ্যমান।
- ব্যবহার: পৃষ্ঠা দৃশ্যমান হওয়ার পরে Animation শেষ করা, UI রিফ্রেশ বা অন্য কোনো স্টেট রিলেটেড কাজ।
on: {
pageAfterIn: function (e, page) {
console.log('Page is now fully visible');
// Animation সম্পন্ন করা বা UI রিফ্রেশ
}
}
pageBeforeOut
- কখন ট্রিগার হয়: পৃষ্ঠা আড়াল হওয়ার আগে।
- ব্যবহার: পৃষ্ঠা ছেড়ে যাওয়ার আগেই কোনো অপ্রয়োজনীয় ডেটা সংরক্ষণ বা আনসাবস্ক্রাইব ইভেন্ট।
on: {
pageBeforeOut: function (e, page) {
console.log('Page will be hidden soon');
// ডেটা সেভ করা বা ইভেন্ট আনসাবস্ক্রাইব করা
}
}
pageAfterOut
- কখন ট্রিগার হয়: পৃষ্ঠা আড়াল হওয়ার পরে।
- ব্যবহার: পৃষ্ঠা আড়াল হওয়ার পর রিসোর্স রিলিজ করা বা স্টেট রিসেট করা।
on: {
pageAfterOut: function (e, page) {
console.log('Page is now hidden');
// স্টেট রিসেট বা রিসোর্স ক্লিন-আপ করা
}
}
pageBeforeRemove
- কখন ট্রিগার হয়: পৃষ্ঠা DOM থেকে সরানোর আগে।
- ব্যবহার: পৃষ্ঠা সম্পূর্ণরূপে ধ্বংস হওয়ার আগে মেমোরি ম্যানেজমেন্ট বা Cleanup করা।
on: {
pageBeforeRemove: function (e, page) {
console.log('Page will be removed from DOM');
// রিসোর্স ফ্রি করা বা মেমোরি ম্যানেজমেন্ট
}
}
Page ইভেন্ট হ্যান্ডলার কোথায় সংজ্ঞায়িত করবেন?
Page Lifecycle Events হ্যান্ডলারগুলো আপনি সরাসরি রাউটারের রুট কনফিগারেশন বা পৃষ্ঠার টেমপ্লেট স্ক্রিপ্টে রাখতে পারেন।
Router Config-এ ইভেন্ট হ্যান্ডলার:
routes: [
{
path: '/about/',
url: './pages/about.html',
on: {
pageInit: function (e, page) {
console.log('About page init');
},
pageAfterIn: function (e, page) {
console.log('About page after in');
}
}
}
]
Page Script-এ ইভেন্ট হ্যান্ডলার (Template):
<div class="page" data-name="about">
<!-- page content -->
</div>
<script>
return {
on: {
pageInit: function (e, page) {
console.log('About page init from template script');
}
}
}
</script>
Lifecycle Events ব্যবহারের সুবিধা
- স্টেট ম্যানেজমেন্ট সহজ: প্রতিটি পেজ ইভেন্টে প্রয়োজনীয় অ্যাকশন নিতে পারলে অ্যাপের স্টেট ম্যানেজমেন্ট সহজ হয়।
- ডাটালোডিং অপ্টিমাইজেশন: পৃষ্ঠা লোড হওয়ার সময়ই API কল করে ডেটা লোড করা যায়, যা পারফরম্যান্স উন্নত করে।
- রিসোর্স ম্যানেজমেন্ট: পৃষ্ঠা আড়াল হওয়া বা ধ্বংস হওয়ার সময় অপ্রয়োজনীয় রিসোর্স মুক্ত করা যায়।
- Animation এবং Transition কন্ট্রোল: পৃষ্ঠা প্রদর্শিত হওয়া বা আড়াল হওয়ার ইভেন্টগুলো ব্যবহার করে Transition এবং Animation নিয়ন্ত্রণ করা যায়।
Page Lifecycle Events ব্যবহারের মাধ্যমে Framework7 এ পৃষ্ঠার লোডিং, প্রদর্শন, আড়াল, ও ধ্বংস প্রক্রিয়াকে নিয়ন্ত্রণ করা যায়। এটি অ্যাপ্লিকেশনের স্টেট এবং রিসোর্স ব্যবস্থাপনা সহজ করে এবং উন্নত UX নিশ্চিত করে।
Read more
